<template>
  <div
    ref="node"
    :style="nodeContainerStyle"
    @click="clickNode"
    @mouseup="changeNodeSite"
    :class="nodeContainerClass"
  >
    <!-- 最左侧的那条竖线 -->
    <div class="ee-node-left"></div>
    <!-- 节点类型的图标 -->
    <div class="ee-node-left-ico flow-node-drag">
      <i :class="nodeIcoClass"></i>
    </div>
    <!-- 节点名称 -->
    <div class="ee-node-text" :show-overflow-tooltip="true">{{node.name}}</div>
    <!-- 节点状态图标 -->
    <div class="ee-node-right-ico">
      <i class="el-icon-circle-check el-node-state-success" v-show="node.state === 'success'"></i>
      <i class="el-icon-circle-close el-node-state-error" v-show="node.state === 'error'"></i>
      <i class="el-icon-warning-outline el-node-state-warning" v-show="node.state === 'warning'"></i>
      <i class="el-icon-loading el-node-state-running" v-show="node.state === 'running'"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    node: Object,
    activeElement: Object
  },
  data () {
    return {}
  },
  computed: {
    nodeContainerClass () {
      return {
        // 设置节点容器的样式
        'ee-node-container': true,
        // 被点击的节点样式
        'ee-node-active': this.activeElement.type == 'node' ? this.activeElement.nodeId === this.node.id : false
      }
    },
    // 节点容器样式(节点的位置)
    nodeContainerStyle () {
      return {
        top: this.node.top,
        left: this.node.left
      }
    },
    nodeIcoClass () {
      var nodeIcoClass = {}
      // 确认节点的图标,使用类名进行设置(我们也可以自定义iconfont文件,或者使用不同类名添加不同背景图片)
      nodeIcoClass[this.node.ico] = true
      // 添加该class可以推拽连线出来
      nodeIcoClass['flow-node-drag'] = true
      return nodeIcoClass
    }
  },
  methods: {
    // 点击节点
    clickNode () {
      this.$emit('clickNode', this.node.id)
      this.$parent.currentNode = this.node
    },
    // 鼠标移动后抬起
    changeNodeSite () {
      // 避免抖动
      if (this.node.left == this.$refs.node.style.left && this.node.top == this.$refs.node.style.top) {
        return;
      }
      this.$emit('changeNodeSite', {
        nodeId: this.node.id,
        left: this.$refs.node.style.left,
        top: this.$refs.node.style.top,
      })
    }
  }
}
</script>
